<script lang="ts" setup>
import { computed, useSlots } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const last = computed(() => route.matched[route.matched.length - 1])
const slots = useSlots()
</script>

<template>
	<header class="header">
		<div class="title">
			<slot v-if="slots.left" name="left"/>
			<span v-else>{{ (last.meta as any).title }}</span>
		</div>
		<div class="rightMenu">
			<slot name="right"/>
		</div>
	</header>
</template>
<style lang="less" scoped>
.header {
	height: 60px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-left: 20px;
	padding-right: 20px;

	.title {
		line-height: 1;
	}

	.rightMenu {
		display: flex;
		align-items: center;

		> :deep(*) {
			&:not(:last-child) {
				margin-right: 10px;
			}
		}
	}
}
</style>
